<template>
<el-main>
    <el-button type="primary" size="mini" icon="el-icon-plus" circle @click="add"></el-button>
    <el-dialog :title="formTitle" :visible.sync="visible" center @close="resetForm('trip')">
        <form-model ref="trip"></form-model>
        <div slot="footer" class="dialog-footer">
            <el-button class="cancel" @click="resetForm('trip')">取 消</el-button>
            <el-button class="confirm" type="primary" @click="submitForm">确 定</el-button>
        </div>
    </el-dialog>
    <el-table :data="tableData" size="mini">
        <el-table-column prop="id" label="序号" min-width="10%" :sortable="true">
        </el-table-column>
        <el-table-column prop="title" label="关键内容" min-width="20%" :sortable="true">
        </el-table-column>
        <el-table-column prop="start_time" label="开始时间" min-width="15%" :sortable="true">
        </el-table-column>
        <el-table-column prop="end_time" label="结束时间" min-width="15%" :sortable="true">
        </el-table-column>
        <el-table-column prop="area" label="地区" min-width="10%" :sortable="true">
        </el-table-column>
        <el-table-column prop="remark" label="备注" min-width="15%">
        </el-table-column>
        <el-table-column align="right" min-width="15%">
            <template slot="header" slot-scope="scope">
                <el-input v-model="searchText" type="text" size="mini" placeholder="关键字搜索" clearable auto-complete="off" @keyup.enter.native="searchFull()" />
            </template>
            <template slot-scope="scope">
                <el-button type="primary" icon="el-icon-edit" circle size="mini" @click="handleEdit(scope.$index, scope.row)"></el-button>
                <el-button type="danger" icon="el-icon-delete" size="mini" circle @click="handleDelete(scope.$index, scope.row)"></el-button>
            </template>
        </el-table-column>
    </el-table>
    <page ref="page" v-on:sizechange="pagesizeChange" v-on:pagechange="pageChange"></page>
</el-main>
</template>

<script>
import formModel from "../TripPage/Model";
import page from "../HomePage/Page";
const remote = require("electron").remote;
const db = remote.getGlobal("db_local");

export default {
    data() {
        return {
            visible: false,
            tableData: [],
            searchText: '',
            username: "严总",
            currentSql: "",
            currentPageSql: "",
            pagesize: 5,
            page: 1,
            hasCondition: false,
            formTitle:''
        };
    },
    created() {},
    mounted() {
        this.currentSql = this.currentNoConditionPageSql;
        this.currentPageSql = this.currentNoConditionNumSql;
        this.refreshList();
    },
    computed: {
        currentNoConditionPageSql: function () {
            return (
                "select * from trip order by id desc limit " +
                this.pagesize +
                " offset " +
                this.pagesize * (this.page - 1)
            );
        },
        currentNoConditionNumSql: function () {
            return "select count(*) as num from trip";
        },
        currentConditionPageSql: function () {
            return (
                'select * from trip where title like "%' +
                this.searchText +
                '%" or start_time like "%' +
                this.searchText +
                '%" or end_time like "%' +
                this.searchText +
                '%" or area like "%' +
                this.searchText +
                '%" or remark like "%' +
                this.searchText +
                '%" order by id desc limit ' +
                this.pagesize +
                " offset " +
                (this.page - 1) * this.pagesize
            );
        },
        currentConditionNumSql: function () {
            return (
                'select count(*) as num from trip where title like "%' +
                this.searchText +
                '%" or start_time like "%' +
                this.searchText +
                '%" or end_time like "%' +
                this.searchText +
                '%" or area like "%' +
                this.searchText +
                '%" or remark like "%' +
                this.searchText +
                '%"'
            );
        }
    },
    methods: {
        add: function () {
            this.formTitle='新增行程';
            this.visible = true;
        },
        resetForm: function (name) {
            this.$nextTick(() => {
                this.$refs["trip"].trip = {};
            });
            this.visible = false;
        },
        submitForm: function () {
            let tripInfo = this.$refs.trip.trip;
            if (!tripInfo.timeInterval) {
                return;
            }
            let start = tripInfo.timeInterval[0];
            let end = tripInfo.timeInterval[1];
            let id = tripInfo.id;
            let sql;
            if (id > 0) {
                sql =
                    'update trip set title="' +
                    tripInfo.title +
                    '",start_time="' +
                    start +
                    '",end_time="' +
                    end +
                    '",area="' +
                    tripInfo.area +
                    '",remark="' +
                    tripInfo.remark +
                    '" where id= ' +
                    id;
            } else {
                sql =
                    'insert into trip (title,start_time,end_time,area,remark) values ("' +
                    tripInfo.title +
                    '","' +
                    start +
                    '","' +
                    end +
                    '","' +
                    tripInfo.area +
                    '","' +
                    tripInfo.remark +
                    '")';
            }

            db.run(sql, err => {
                if (err != null) {
                    console.log(err);
                } else {
                    this.resetForm();
                    let newTrip = JSON.parse(JSON.stringify(tripInfo));
                    newTrip.start_time = newTrip.timeInterval[0];
                    newTrip.end_time = newTrip.timeInterval[1];
                }
            });
            this.refreshList();
        },
        handleEdit: function (index, row) {
            let id = row.id;
            let sql_one = "select * from trip where id=" + id;
            db.get(sql_one, (err, record) => {
                if (err != null) {
                    console.log(err);
                } else {
                    this.formTitle='编辑行程';
                    this.visible = true;
                    setTimeout(() => {
                        this.$refs.trip.trip = {
                            id: record.id,
                            title: record.title,
                            timeInterval: [record.start_time, record.end_time],
                            area: record.area,
                            remark: record.remark
                        };
                    }, 200);
                }
            });
        },
        refreshList: function () {
            if (this.hasCondition) {
                this.currentSql = this.currentConditionPageSql;
                this.currentPageSql = this.currentConditionNumSql;
            } else {
                this.currentSql = this.currentNoConditionPageSql;
                this.currentPageSql = this.currentNoConditionNumSql;
            }
            console.log('tag', this.currentSql)
            db.all(this.currentSql, (err, rows) => {
                if (err == null) {
                    this.tableData = rows;
                    this.pageInit();
                } else {
                    console.log("db", err);
                }
            });
        },
        handleDelete: function (index, row) {
            let id = row.id;
            let sql = "delete from trip where id=" + id;
            db.run(sql, err => {
                if (err != null) {
                    console.log("db", err);
                }
            });
            this.refreshList();
        },
        pagesizeChange: function (pageInfo) {
            this.pagesize = pageInfo.size;
            this.refreshList();
        },
        pageInit: function () {
            db.get(this.currentPageSql, (err, row) => {
                if (err != null) {
                    console.log("db", err);
                } else {
                    this.$refs.page.total = row.num;
                }
            });
        },
        pageChange: function (pageInfo) {
            console.log("tag", pageInfo);
            this.page = pageInfo.currentPage;
            this.refreshList();
        },
        searchFull: function () {
            this.hasCondition = true;
            this.refreshList();
        }
    },
    components: {
        formModel,
        page
    }
};
</script>
